<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>查找元素</title>
    </head>
    <body>

        <div class="wrapper first">
            <div class="middle odd">
                <ul>
                    <li>
                        <div>1</div>
                    </li>
                    <li>
                        <div>2</div>
                    </li>
                    <li>
                        <div>3</div>
                    </li>
                </ul>
                <ul>
                    <li>
                        <div>1</div>
                    </li>
                    <li>
                        <div>2</div>
                    </li>
                    <li>
                        <div>3</div>
                    </li>
                </ul>
            </div>
            <div class="middle even">
                <ul>
                    <li>
                        <div>1</div>
                    </li>
                    <li>
                        <div>2</div>
                    </li>
                    <li>
                        <div>3</div>
                    </li>
                </ul>
                <ul>
                    <li>
                        <div>1</div>
                    </li>
                    <li>
                        <div>2</div>
                    </li>
                    <li>
                        <div>3</div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="wrapper second">
            <div class="middle odd ">
                <ul>
                    <li>
                        <div>1</div>
                    </li>
                    <li>
                        <div>2</div>
                    </li>
                    <li>
                        <div>3</div>
                    </li>
                </ul>
                <ul>
                    <li>
                        <div>1</div>
                    </li>
                    <li>
                        <div>2</div>
                    </li>
                    <li>
                        <div>3</div>
                    </li>
                </ul>
            </div>
            <div class="middle even">
                <ul>
                    <li>
                        <div>1</div>
                    </li>
                    <li>
                        <div>2</div>
                    </li>
                    <li>
                        <div>3</div>
                    </li>
                </ul>
                <ul>
                    <li>
                        <div>1</div>
                    </li>
                    <li>
                        <div>2</div>
                    </li>
                    <li>
                        <div>3</div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="wrapper third">
            <div class="middle odd">
                <ul>
                    <li>
                        <div>1</div>
                    </li>
                    <li>
                        <div>2</div>
                    </li>
                    <li>
                        <div>3</div>
                    </li>
                </ul>
                <ul>
                    <li>
                        <div>1</div>
                    </li>
                    <li>
                        <div>2</div>
                    </li>
                    <li>
                        <div>3</div>
                    </li>
                </ul>
            </div>
            <div class="middle even">
                <ul>
                    <li>
                        <div>1</div>
                    </li>
                    <li>
                        <div>2</div>
                    </li>
                    <li>
                        <div>3</div>
                    </li>
                </ul>
                <ul>
                    <li>
                        <div>1</div>
                    </li>
                    <li>
                        <div>2</div>
                    </li>
                    <li>
                        <div>3</div>
                    </li>
                </ul>
            </div>
        </div>

        <script>

            /*
            let list = document.querySelectorAll( '.odd');
            Array.from(list).forEach( e =>{
                e.style.border = '1px solid blue '; 
            });
            */

            /*
            let list = document.querySelectorAll( '.second .odd');
            Array.from(list).forEach( e =>{
                e.style.border = '1px solid blue '; 
            });
            */

            /*
            let collection = document.querySelectorAll( '.wrapper' );
            Array.from( collection ).forEach( e =>{
                e.style.border = '1px solid red '; 

                let list = e.querySelectorAll( '.odd' ); // '.wrapper .odd'

                Array.from(list).forEach( x =>{
                    x.style.margin = '10px';
                    x.style.border = '1px solid blue'; 
                });

            });
            */

            let s = document.querySelector( '.second' );
            s.style.border = '1px solid red '; 
            
            let list = s.querySelectorAll( '.odd' ); // '.second .odd'
            // let list = s.getElementsByClassName( 'odd' );
            Array.from(list).forEach( x =>{
                x.style.margin = '10px';
                x.style.border = '1px solid blue'; 
            });

        </script>
        
    </body>
</html>